<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let user = {
            name: "alice",
            age: 30,
            sex: "女"
        };

        // ES6中对象的解构通过对象的属性名的方式进行取值的
        // 1.基本解构
        //     根据属性名去取出对象的对应值
        //     以属性名作为变量进行赋值定义

        // let {age,name,sex}=user;//完全解构
        // console.log(age,name,sex);

        let { age, name } = user;//不完全解构
        console.log(age, name);
        let users = {
            name: "lili",
            age: 20,
            sex: "女"
        };
        //重命名解构
        let { name: myName, age: myAge, sex: mySex } = users;
        console.log(myName, myAge, mySex);


        //剩余解构
        // 将剩余的key:value参数合并成一个新的对象
        // 剩余解构的语法必须位于解构表达式的最后一位

        let objs = {
            a: "alice",
            b: "baby",
            c: "cici",
            d: "david"
        };
        // let {a,d,...newObj}=objs;
        // let {a,...newObj,d}=objs;//报错
        // console.log(a,d,newObj)


        //模式匹配错误
        // g匹配不到，对应的值undefined
        // h设置了默认值
        // i匹配到数据,并且同时设置了默认值,最终取的是匹配的值(匹配值优先，默认值在后)
        let { g, h = "嘻嘻嘻", e: ee, i: ii = "i am happy" } = { e: "eric", f: "france", i: "world" };
        console.log(g, h, ee, ii);

        //对象多层解构
        let data = {
            state: true,
            msg: "今天是星期三",
            film: {
                fname: "万里归途",
                fyear: 2022,
                ftype: "故事"
            }
        };
        console.log(data.film.fname);
        console.log(data["film"]["fname"]);
        let { msg, film: { fname } } = data;
        console.log(msg, fname);

        let datas = {
            state: true,
            msg: "今天是星期三",
            films: [
                {
                    a: 1,
                    b: 2
                },
                {
                    a: 3,
                    b: 4
                }, {
                    a: 5,
                    b: 6
                }
            ]

        };

        let {state,films:[,{b}]}=datas;
        console.log(state,b);

        let {films:[,,{b:myB}]}=datas;
        console.log(myB);

        let aa;
        let bb;
        let o={
            aa:"我是aa",
            bb:"我是bb"
        };

        ({aa,bb}=o);
        console.log(aa,bb);


        let {ceil,round,floor}=Math;
        console.log(ceil,round,floor);
        console.log(Math.ceil(10.3));
        console.log(ceil(12.3));
        console.log(round(12.3));
        console.log(floor(12.3));
    </script>
</head>

<body>

</body>

</html>